<!--
 * @Author: wangding
 * @Date: 2020-11-06 09:45:39
 * @LastEditTime: 2021-02-03 11:15:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\batteryViews\history.vue
-->
<template>
    <div class="historyBattery-main-box">
       <div class="title-box">
           <div>{{$t('m_493697251076472832')}}</div>
           <div class="date-time-box">
                <div>
                    <span>{{$t('report.selectTime')}} </span>
                    <el-date-picker
                    v-model="begin"
                    type="date"
                    :placeholder="$t('selectDate')"
                    value-format='yyyy-MM-dd'
                    @change='changeDateTime'
                    :clearable='false'
                    :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                    <span>-</span>
                    <el-date-picker
                    v-model="end"
                    type="date"
                    placeholder="$t('selectDate')"
                    value-format='yyyy-MM-dd'
                    @change='changeDateTime'
                    :clearable='false'
                    :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </div>
                <div style="margin-left:10px;">
                    <span>{{$t('batteryAnalysis.selectData')}}</span>
                    <el-select v-model="fieldName" filterable :placeholder="$t('please_choose')" @change='changeType'>
                        <el-option
                        v-for="item in batteryList"
                        :key="item.value"
                        :label="item.code"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>

           </div>
       </div>
       <div class="centert-box" v-loading="loading">
           <div id="echartsBox"></div>
       </div>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    components: {

    },
    props: {
        detailDataList:{
            type:Object,
            default:() =>{return {}}
        }
    },
    data() {
        return {
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            begin:moment().format("YYYY-MM-DD"),
            end:moment().format("YYYY-MM-DD"),
            fieldName:"batVoltage1",
            batteryList:[],
            loading:false,
            dataList:[]
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        this.batteryGetHistoryBatterys()
    },
    methods: {
        initEcharts(){
            let option= {
                tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                grid: {
                    left:'10%',
                    right:'15%',
                    bottom:'15%'
                    },
                legend: {
                        itemWidth: 20,
                        itemHeight: 15
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                xAxis : [
                    {
                    
                        type : 'category',
                        axisTick: {
                                alignWithLabel: true
                        },
                        data: this.returnData('timeStringVal') || this.$t('battery.limitVoltage')+'(V)'
                    }
                ],
                series:[
                   {
                        name:this.returnName(this.fieldName),
                        type:'line',
                        symbolSize: 0,
                        smooth: false,
                        data:this.returnData('fieldName'),
                    }, 
                ],
                yAxis:[
                    {
                        name :this.returnName(this.fieldName) || this.$t('battery.limitVoltage')+'(V)',
                        type : 'value',
                        inverse: false,
                        // interval : 25,//强制设置坐标轴分割间隔。
                        axisTick:{       //x轴刻度线
                            show:false
                        },
                        splitLine: {
                            show: true
                        },
                        position: 'left',
                        nameGap: 15,//name距离顶部位置
                        nameTextStyle:{
                            padding: [0, 0, 0, 30]//name的位置
                        },
                    },
                ]
            }
           let myChart = this.echarts.init(document.getElementById("echartsBox"));
            myChart.setOption(option); 
        },
        returnData(type){
            let arr =[]
            this.dataList.forEach(item =>{
                arr.push(item[type])
            })
            return arr
        },
        returnName(val){
            let name = ''
            this.batteryList.forEach(item => {
                if(item.value == val){
                    name = item.code +"("+item.remark+")"
                }
            })

            return name
        },
        changeDateTime(){
            this.batteryGetHistoryBatterys()
        },
        changeType(){
            this.batteryGetHistoryBatterys()
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'BATTRY_STATUS_MESSAGE',
                lang:localStorage.getItem('lan')
            })
            this.batteryList = res.BATTRY_STATUS_MESSAGE || []
        },
        async batteryGetHistoryBatterys(){
            this.loading = true
            let res = await this.API.batteryGetHistoryBatterys({
                inverterSn:sessionStorage.getItem('selRow_inverter_sn'),
                begin:this.begin,
                end:this.end,
                fieldName:this.fieldName,
            })
            this.loading = false
            this.dataList = res ||[]
            this.initEcharts()
         }   
    },
};
</script>

<style  lang="less" scoped>
.historyBattery-main-box{
        width: 100%;
        background-color: #EFEFEF;
        height: 600px;
        border-radius: 10px;
    .title-box{
        font-size: 16px;
        border-bottom: 2px dotted #d6d6d6;
        padding: 9px 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .date-time-box{
            display: flex;
            align-items: center;
            div{
                display: flex;
                align-items: center;
                span{
                    margin-right:10px; 
                }
            }
        }
    }
    .centert-box{
        width: 100%;
        height: 500px;
        #echartsBox{
            width: 100%;
            height: 500px;
        }
    }
}
</style>
